import React, { Component } from "react";
import Header from "../header/header";
import axios from "../../utils/myAxios";
import "./shortVideo.scss";
import { withRouter } from "react-router-dom";

class shortVideo extends Component {
  constructor(props) {
    super(props);
    this.shortVideoRef = React.createRef();
    this.pagesize = 10;
    this.pagenum = 1;
  }
  state = {
    short: [],
  };

  componentWillUnmount() {
    // 注销监听事件
    this.shortVideoRef.current.removeEventListener(
      "scroll",
      this.handleScroll
    );
  }

  handleScroll = () => {
    let parentElement = this.shortVideoRef.current;
    let clientHeight = parentElement.clientHeight;
    // console.log("列表的高度",clientHeight);
    let scrollHeight = parentElement.scrollHeight;
    // console.log("列表可以滚动的高度",scrollHeight);
    let scrollTop = parentElement.scrollTop;
    //  console.log("列表已经滚动的高度",scrollTop);
    if (scrollHeight - clientHeight - scrollTop <= 1) {
      axios
        .get(
          "/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=7912B020FA3511EA83AC6D256CB23356A86A2DB89B544C4A8E131835FC20BBD1&token=GPGTltZTr6--834mnlH7rJ6_ptUAAAAAkgsAAIwsBif-Pt16wmyF-4XBLnljabB-EuN8ecrV79FvIlF9wJ0WTFitXv861Fxb8C8TKQ&channelId=4&feedChannelId=105&timestamp=1601021899520&offset=10"
        )
        .then((res) => {
          this.setState({
            short: [...this.state.short, ...res.data.feeds],
          });
        });
    }
  };

  componentDidMount() {
    axios
      .get(
        "/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=7912B020FA3511EA83AC6D256CB23356A86A2DB89B544C4A8E131835FC20BBD1&token=GPGTltZTr6--834mnlH7rJ6_ptUAAAAAkgsAAIwsBif-Pt16wmyF-4XBLnljabB-EuN8ecrV79FvIlF9wJ0WTFitXv861Fxb8C8TKQ&channelId=4&feedChannelId=105&timestamp=1601021899520&offset=10"
      )
      .then((res) => {
        this.setState({
          short: res.data.feeds,
        });
      });
    this.shortVideoRef.current.addEventListener("scroll", () => {
      let parentElement = this.shortVideoRef.current;
      let clientHeight = parentElement.clientHeight;
      // console.log("列表的高度",clientHeight);
      let scrollHeight = parentElement.scrollHeight;
      // console.log("列表可以滚动的高度",scrollHeight);
      let scrollTop = parentElement.scrollTop;
      //  console.log("列表已经滚动的高度",scrollTop);
      if (scrollHeight - clientHeight - scrollTop <= 1) {
        axios
          .get(
            "/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=7912B020FA3511EA83AC6D256CB23356A86A2DB89B544C4A8E131835FC20BBD1&token=GPGTltZTr6--834mnlH7rJ6_ptUAAAAAkgsAAIwsBif-Pt16wmyF-4XBLnljabB-EuN8ecrV79FvIlF9wJ0WTFitXv861Fxb8C8TKQ&channelId=4&feedChannelId=105&timestamp=1601021899520&offset=10"
          )
          .then((res) => {
            this.setState({
              short: [...this.state.short, ...res.data.feeds],
            });
          });
      }
    });
  }
  handleItemClick = (id) => {
    this.props.history.push("/shortVideos/" + id);
  };
  render() {
    return (
      <div>
        <Header></Header>
        <div className="videos">
          <div className="shortVideo" ref={this.shortVideoRef}>
            {this.state.short.map((v, index) => {
              return (
                <div
                  className="shortVideo-item"
                  key={index}
                  onClick={this.handleItemClick.bind(this, v.video.id)}
                >
                  <img src={v.video.imgUrl} alt="" />
                  <p>{v.title}</p>
                  <div className="user">
                    <div className="userimg">
                      <img src={v.user.avatarurl} alt="" />
                    </div>
                    <span>{v.user.nickName}</span>
                    <i></i>
                    <b>{v.upCount}</b>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(shortVideo);
